<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	template="../templates/user_template.xhtml">

	<ui:define name="css-styles">
		<h:outputScript library="javascript" name="reservations.js" />
		<h:outputScript library="javascript" name="jquery-1.7.2.js" />
		<h:outputStylesheet library="css" name="reservations.css" />
	</ui:define>


	<ui:define name="title">
			Резервация
	</ui:define>

	<ui:define name="content">
	
		
			<h1 align="center" style="color: black;">Зала: #{reservation.hallNumber} - Филм: #{reservation.movie.name}</h1>
			<h1 align="center" style="color: black;">Начален час: #{reservation.movieStartTime}</h1>

		<h:form>
			<div id="cinemaHall">
				
				<div style="display: block;">
					<h:graphicImage url="/resources/images/CinemaScreen.png">
					</h:graphicImage>
				</div>		
				
				<div style="display: block; height: 50px;"/>
				
				<div style="display: block;">
					<h:graphicImage id="a_1" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="a_1_c" value="#{reservation.seats[0]}" />
					
					<h:graphicImage id="a_2" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="a_2_c" value="#{reservation.seats[1]}" />
					
					<h:graphicImage id="a_3" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="a_3_c" value="#{reservation.seats[2]}" />
					
					<h:graphicImage id="a_4" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="a_4_c" value="#{reservation.seats[3]}" />
					
					<h:graphicImage id="a_5" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="a_5_c" value="#{reservation.seats[4]}" />
				</div>

				<div style="display: block;">
					<h:graphicImage id="b_6" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="b_6_c" value="#{reservation.seats[5]}" />
					
					<h:graphicImage id="b_7" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="b_7_c" value="#{reservation.seats[6]}" />
					
					<h:graphicImage id="b_8" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="b_8_c" value="#{reservation.seats[7]}" />
					
					<h:graphicImage id="b_9" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="b_9_c" value="#{reservation.seats[8]}" />
					
					<h:graphicImage id="b_10" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="b_10_c" value="#{reservation.seats[9]}" />
					
					<h:graphicImage id="b_11" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="b_11_c" value="#{reservation.seats[10]}" />
					
					<h:graphicImage id="b_12" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="b_12_c" value="#{reservation.seats[11]}" />
				</div>
			
				<div style="display: block;">
					<h:graphicImage id="c_13" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="c_13_c" value="#{reservation.seats[12]}" />
					
					<h:graphicImage id="c_14" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="c_14_c" value="#{reservation.seats[13]}" />
					
					<h:graphicImage id="c_15" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="c_15_c" value="#{reservation.seats[14]}" />
					
					<h:graphicImage id="c_16" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="c_16_c" value="#{reservation.seats[15]}" />
					
					<h:graphicImage id="c_17" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="c_17_c" value="#{reservation.seats[16]}" />
					
					<h:graphicImage id="c_18" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="c_18_c" value="#{reservation.seats[17]}" />
					
					<h:graphicImage id="c_19" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="c_19_c" value="#{reservation.seats[18]}" />
					
					<h:graphicImage id="c_20" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="c_20_c" value="#{reservation.seats[19]}" />
					
					<h:graphicImage id="c_21" url="/resources/images/WhiteSeat.png"
						onclick="reserveSeat(this)">
					</h:graphicImage>
					<h:selectBooleanCheckbox id="c_21_c" value="#{reservation.seats[20]}" />
				</div>
			
				<div id="button">
					<h:commandButton value="Резервирай" action="#{reservation.reserve}" />
				</div>

			</div>

		</h:form>

	</ui:define>

</ui:composition>